<template>
    <div class="content">
       <h1 class="title">
           <slot name="title"></slot>
           <hr/>
       </h1>
      <el-table :data="order">
        <el-table-column label="食物名">
          <template slot-scope="scope">
            {{shop[scope.$index].name}}
          </template>
        </el-table-column>
        <el-table-column label="食物图片">
          <template slot-scope="scope">
            <img style="height: 40px;width: 100px" :src="shop[scope.$index].pic">
          </template>
        </el-table-column>
        <el-table-column
          label="食物数量"
          prop="number">

        </el-table-column>
        <el-table-column
          label="价格"
          prop="money">

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="TuiKuan(scope.row.id)">退款</el-button>
            <el-button type="success" size="mini" @click="TrueSH(scope.row.id)">确认送达</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
import {mapGetters} from "vuex";
import {mixin} from "../mixins";
import {inquireAboutYourOrder} from "../api/order";
import {TheInformationOfADishByTheDishId} from "../api/food";
import {cancelOrder,OrderInterface} from "../api/order";
export default {
    name: 'album-content-two',
    mixins: [mixin],
    // props:[
    //     'songList'
    // ],
  data(){
      return {
        order:[],
        shop:[],
        fshop:[],
      }
  },
  created() {
      this.getFooList();
  },
  mounted() {
      this.getFooList();
  },
  methods:{
    //获取所有支付过的商品的信息
    getFooList(){
      inquireAboutYourOrder().then(res=>{
        if (res.data.code == 200){
          this.order = res.data.obj;
          for (let  shop of res.data.obj){
            TheInformationOfADishByTheDishId(shop.foodId).then(bes=>{
              // console.log(bes.data.obj)
              this.shop.push(bes.data.obj)
            })
          }
        }
      })
      for (let sp of this.shop){
        this.fshop.push(sp);
      }
      this.shop = this.fshop;
      console.log(this.shop)
    },
    //退款
    TuiKuan(id){
      cancelOrder(id).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message);
          this.getFooList();
        }else {
          this.$message.error(res.data.message)
        }
      }).catch(error=>{
        this.$message.error("退款失败")
      })
    },
    //确认收货
    TrueSH(id){
      OrderInterface(id).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message);
          this.getFooList();
        }else {
          this.$message.error(res.data.message)
        }
      }).catch(error=>{
        this.$message.error("确认送达失败")
      })
    },
  },



}

</script>

<style lang="scss" scoped>
@import '../assets/css/album-content.scss';
</style>
